﻿<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <style>
        body {
            padding: 0px;
            margin: 0px;
            background-image: url('./images/s3-2/s3-2-bg.jpg');
            background-repeat: no-repeat;
            width: 1920px;
            height: 1080px;
            overflow:hidden;
        }

        em {
            color: #fff100;
            font-style: normal;
            font-size: 18pt;
            vertical-align: middle;
            margin-left: 5px;
        }

        .countText {
            color: #fff100;
            font-size: 42pt;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="container" style="height: 100%"></div>
    <img id="mediaGif" src="images/s3-2/s3-2-pfs.gif" style="position:absolute; left:1415px; top:675px; width:450px; height:275px; display:none;" />
    <script type="text/javascript" src="assets/jquery.js"></script>
    <script type="text/javascript" src="assets/echarts.min.js"></script>
    <script type="text/javascript" src="assets/dataTool.min.js"></script>
    <script type="text/javascript" src="assets/china.js"></script>
    <script type="text/javascript" src="assets/echarts/map/jiangsu.js"></script>
    <script src="./assets/jzcode.js"></script>
    <script src="./assets/jzcode.event.remote.js"></script>
    <script src="./content/s3-1-event.js"></script>
    <script src="./content/jzcode.sinotrans.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;


        var g_provinceCount = null;


        function convertProvinceCountData() {
            var lData = [];
            for (var index = 0; index < g_provinceCount.names.length; index++) {
                lData.push({ name: g_provinceCount.names[index], value: g_provinceCount.values[index] });
            }
            return lData;
        }
        $.get(jzcode.data.getUrl('./data/s3-2-map-pos.json'), function (s3_2MapPosData) {
            $.get(jzcode.data.getUrl('./data/data-s3-province.json'), function (s3ProvinceJson) {
                g_provinceCount = s3ProvinceJson;
                //$('#countCk').html(g_s3MapCkData.mapData.length);
                //$('#countDc').html(g_s3MapDcData.mapData.length);
                //$('#countMt').html(g_s3MapMtData.mapData.length);
                option = {
                    title: {
                        text: '',
                        subtext: '',
                        sublink: '#',
                        left: 'center',
                        top: 5,
                        itemGap: 0,
                        textStyle: {
                            color: '#577ceb'
                        }
                    },
                    brush: {
                        geoIndex: 0,
                        brushLink: 'all',
                        inBrush: {
                            opacity: 1
                        },
                        outOfBrush: {
                            color: '#b99e2a',
                            symbolSize: 4,
                            opacity: 0.1
                        }
                    },
                    graphic: {
                        elements: [{
                            type: 'image',
                            left: 511,
                            top: 236,
                            style: {
                                image: './images/s3-2/s3-2-label.png'
                            },
                            z: 3
                        }, {
                            type: 'image',
                            left: 1400,
                            top: 50,
                            style: {
                                image: './images/s3-2/s3-2-detail.png'
                            },
                            z: 3
                        }]
                    },
                    geo: [{
                        map: 'china',
                        silent: true,
                        label: {
                            emphasis: {
                                show: false,
                                areaColor: '#eee'
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: 'rgba(128, 128, 128, 0.1)',
                                borderColor: '#000',
                                borderWidth: 1,
                                color: '#fff',
                                shadowColor: '#000',
                                shadowBlur: 20
                            }
                        },
                        left: 90,
                        top: 130,
                        bottom: 130,
                        right: '36%',
                        roam: false
                    }],
                    grid: [
                        { x: 1350, y: 80, width: 500, height: 210, containLabel: false },
                        { x: 1300, y: 435, width: 500, height: 250, containLabel: true }
                    ],
                    visualMap: [{
                        min: 0,
                        max: 80,
                        range: [0, 80],
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'],           // 文本，默认为数值文本
                        calculable: true,
                        orient: 'horizontal',
                        itemWidth: 20,
                        itemHeight: 210,
                        show: true,
                        seriesIndex: 0,
                        inRange: {
                            color: ['#FFeeee', '#3cb058', '#158030', '#b17411', '#ff6e02']
                        },
                        outRange: {
                            color: ['white']
                        },
                        left: 140,
                        top: 840,
                        textStyle: {
                            color: '#fff'
                        }
                    }],
                    series: [
                        {
                            name: 'iphone3',
                            type: 'map',
                            //geoIndex: 0,
                            mapType: 'china',
                            left: 90,
                            top: 130,
                            bottom: 130,
                            right: '36%',
                            roam: false,
                            label: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        color: '#555577',
                                        fontSize: 20
                                    },
                                    formatter: function (value, index) {
                                        return value.name;
                                    }
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: 'rgba(0,0,10,0.2)',
                                    borderWidth: 1
                                }
                            },
                            data: convertProvinceCountData()
                        },
                      {
                          name: '全国机构',
                          type: 'scatter',
                          symbol: 'image://./images/s3-1/icon-ck.png',
                          symbolSize: [24, 39],
                          symbolOffset: [-12, -19],
                          geoIndex: 0,
                          coordinateSystem: 'geo',
                          data: s3_2MapPosData.mapData,
                          label: {
                              normal: {
                                  formatter: '{b}',
                                  position: 'right',
                                  show: false
                              },
                              emphasis: {
                                  show: true
                              }
                          },
                          itemStyle: {
                              normal: {
                                  //borderColor: '#fff',
                                  color: '#F00',
                              }
                          }
                      }
                    ]
                };

                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }

                $('#mediaGif').show();
            }, 'json');
        }, 'json');

        register();
    </script>
</body>
</html>